<template>
  <q-page class="m-auto w-full bg-pink-50 h-full" padding>
    <div class="w-full flex justify-center h-12">
      <q-input rounded outlined class="w-2/3 h-12" color="red-10" v-model="text">
        <template v-slot:append>
          <q-icon class="hover:cursor-pointer" name="search" />
        </template>
      </q-input>
    </div>
    <div class="w-full m-auto mt-10 bg-white rounded-lg  container grid grid-cols-4 gap-6 overflow-y-scroll">
      <div v-for=" item in data.slice(0, 10)" :key="item">
        <div
          class="max-w-sm h-96 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
          <div class="w-full h-2/3">
            <img @click="jumpToDetailPage(item)" class="rounded-t-lg  w-full h-full hover:shadow-lg hover:cursor-pointer"
              :src="item.pics" alt="" />
          </div>
          <div class="p-5 h-1/3">
            <a class="flex justify-between">
              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ item.name }}</h5>
              <q-btn color="black" label="删除收藏" @click="deleteConllection(item)" />
              <span
                class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">
                {{ item.rating }}
              </span>
            </a>
            <p class="mt-1 mb-3 font-normal text-gray-700 dark:text-gray-400">
              {{ item.ingredient }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>
  
<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import { getAllBlogs, getItemsInList } from "src/boot/blogs/blogs";
import { getOne, deleteOne } from 'src/boot/collections';
const $q = useQuasar()
const router = useRouter();
const route = useRoute()
let data = ref([]);
getOne({ user_id: route.query.user_id }).then(res => {
  let resp = res.data
  let data = resp.data
  let blog_ids = []
  data.forEach(element => {
    blog_ids.push(element.blog_id)
  });
  return blog_ids
}).then(blog_ids => {
  console.log(blog_ids)
  getItemsInList({ id: blog_ids }).then(res => {
    let resp = res.data
    data.value = resp.data
  })
})
getItemsInList({}).then(res => {
  data.value = res.data.data
})

function jumpToDetailPage(queryItem) {
  router.push({
    name: 'detail',
    query: queryItem
  })
}

const deleteConllection = (queryItem) => {
  console.log(queryItem);
  console.log(localStorage.getItem('user_id'));
  let user_id = localStorage.getItem('user_id');
  let id = queryItem.id
  deleteOne({ user_id: user_id, blog_id: id }).then(res => {
    let data = res.data;
    if (data.code === 200) {
      $q.notify({
        message: 'success',
        type: 'positive',
        position: 'top'
      })
    }
    console.log(res);
    location.reload();
  })
}
</script>
  
<style>
.container {
  height: calc(100vh - 150px);
}
</style>
  